<template>
  <div class="desc" v-if="artistDesc">
    <div class="briefDesc">
      <h2><i>&nbsp;</i>{{ $parent.artistDetail.artist.name }}简介</h2>
      <p>{{ artistDesc.briefDesc }}</p>
    </div>
    <div class="desc" v-for="(item, i) in artistDesc.introduction" :key="(i + 1) * 3002">
      <h2>{{ item.ti }}</h2>
      <p v-html="item.txt"></p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // top50歌曲
      artistDesc: null
    }
  },
  methods: {
    // 获取艺术家介绍
    async getArtistDesc() {
      const { data } = await this.$http.get(`/artist/desc?id=${this.$route.query.id}`)
      const reg = /\n/g
      data.introduction.forEach(item => {
        item.txt = item.txt.replaceAll(reg, '<br>')
        console.log(item.txt)
      })
      // console.log(data)
      this.artistDesc = data
    }
  },
  created() {
    this.getArtistDesc()
  }
}
</script>

<style lang="less" scoped>
.desc {
  .briefDesc {
    h2 {
      i {
        height: 14px;
        width: 3px;
        margin-right: 7px;
        background: #c10d0c;
      }
    }
    p {
      text-indent: 2em;
    }
  }
  h2 {
    margin: 28px 0 8px 0;
    color: #333;
    font-size: 14px;
  }
  p {
    line-height: 25px;
    color: #666;
  }
}
</style>
